<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>day3-从数据库获取列表</title>

  <link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">

<style type="text/css">

</style>
</head>
<body>


<div id="app">


<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">添加品牌</h3>
  </div>

  <div class="panel-body form-inline" >
 <!--    因为使用数据库，数据库自动递增id，所以不加id
   <label for="">
     id: <input type="text" v-model="id">
   </label>
  -->
      <label for="">
        name: <input type="text" v-model="name" class="form-control">
      </label>

      <input type="button" value="添加" class="btn btn-primary" @click='add'>

  </div>

</div>






<table class="table table-bordered table hover table-striped">

    <thead>
      <tr>
        <th>Id</th>
        <th>name</th>
        <th>Ctime</th>
        <th>Operation</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.Ctime | timer }}</td>
        <td>
            <a href="" @>删除</a>
        </td>
      </tr>
    </tbody>

</table>
</div>




<!-- 
http://www.liulongbin.top:3005/api/getprodlist/
http://www.liulongbin.top:3005/api/addproduct/
http://www.liulongbin.top:3005/api/delproduct/
 -->



<br>
<script src="vue-resource.min.js"></script>
<script src="vue.js"></script>
<script type="text/javascript">
  



var app = new Vue({
  el: '#app',

  data: { 
        name:"",

        list:'',
       /* [ 
             {  id:1,name:'五菱宏光',  Ctime:new Date()  },
             {  id:2,name:'劳斯莱斯',  Ctime:new Date()  }
        ]
          */
    
  },
    


  methods:{
      
      AllList(){

        this.$http.get("http://www.liulongbin.top:3005/api/getprodlist/").then(result=>{
          //通过$http获取的数据都在result.body之中
          var result = result.body
          if(result.status === 0){
              this.list= result.message
          }else{
              alert("获取数据失败")
          }
        })

      },

      add(){  //添加品牌列表到后台数据库
 //分析， 	
 //  	1：经过查看，查询数据库API接口，发现，要发送一个Post请求，this.$http.post
 //		2:this.$http.post() 中接收三个参数：
 //		  2-1：第一个参数：要请求的URL地址
 //		  2-2：第二个参数：要提交的服务器的数据，要以对象的形式提交服务器  {name:this.name}
 //		  2-3:第三个参数： 是一个配置对象，要以那种表单数据类型提交过去{emulateJSON:true},以普通表单格式将数据提交给服务器application/x-www-form-urlencoded
 //		3.在post方法中，使用.then 来设置成功的回调函数，如果要想拿到成功的结果，需要resulu.body
 		
 		this.$http.post('http://www.liulongbin.top:3005/api/addproduct/',{name:this.name},{emulateJSON:true}).then(result=>{
 			if(result.body.status === 0){
 				this.AllList()
 				this.name=''
 			}else{
 				alert("添加失败")
 			}
 		})
        
      }

    


  },




  //当app实例的data和methods初始化完成后，实例就会自动执行 created()这个生命周期函数
  created:function(){
     this.AllList()//不成功，待测试
   // alert("123")
  },









  filters:{
    timer:function(dataStr,patter= ""){
        var dt = new Date()

        var nian = dt.getFullYear()
        var yue  = dt.getMonth()
        var ri   = dt.getDate()
        var week = dt.getDay()

        return ` ${nian}年-${yue}月-${ri}日 星期${week} ---私有过滤器`
    }//timer私有过滤器结束

}





})//




</script>


	
</body>
</html>